/*
 * @Author: zxc
 * @Date: 2020-08-13 14:16:54
 * @LastEditTime: 2020-09-08 12:01:01
 * @LastEditors: zxc
 * @Description: 返回具体的路由导航
 */
import React from "react";
import { Switch, Route } from "react-router-dom";
import { RouteConfigComponentProps } from "react-router-config";

export default function (props: RouteConfigComponentProps) {
  const { route, match } = props;
  if (!route || !route.routes) {
    return null;
  }

  if (route) {
    if (route.routes) {
      return (
        <Switch>
          {route.routes.map((e, i) => {
            // console.log(e);
            return (
              <Route
                key={`${match.path}${e.path || ""}`}
                // 路径实际上是被拼凑出来的。
                // 拼起来就是  /a/b/c/create
                path={`${match.path}${e.path || ""}`}
                exact={e.exact}
                strict={e.strict}
                render={(props: RouteConfigComponentProps) => {
                  if (e.render) {
                    return e.render({ ...props, route: e });
                  }
                  if (e.component) {
                    return <e.component {...props} route={e} />;
                  }
                  return null;
                }}
              ></Route>
            );
          })}
        </Switch>
      );
    }
  }
  return null;
}
